<template>
  <div>
    <div class="table_header_style flex_s">
      <span>文章管理</span>
      <el-button type="primary" @click="release">发布文章</el-button>
    </div>
    <div class="table_body_style">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="文章分类">
          <el-select v-model="formInline.classification" placeholder="请选择" clearable>
            <el-option
              v-for="(item, index) in optionDate"
              :key="index"
              :label="item.name"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="发布状态">
          <el-select v-model="formInline.status" placeholder="请选择" clearable>
            <el-option label="已发布" value="已发布" />
            <el-option label="草稿" value="草稿" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="tableData" table-layout="fixed" class="table_style">
        <el-table-column prop="title" label="文章标题" width="180" />
        <el-table-column label="分类" width="180">
          <template #default="scope">
            {{ articleformat(scope.row.cate_id) }}
          </template>
        </el-table-column>
        <el-table-column prop="pub_date" label="发表时间" width="200" />
        <el-table-column prop="state" label="状态" width="180" />
        <!-- <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" :icon="Edit" circle @click="handleEdit(scope.row)" />
            <el-button type="danger" :icon="Delete" circle @click="handleDelete(scope.row)" />
          </template>
        </el-table-column> -->
      </el-table>
    </div>

    <!-- 发布文章 -->
    <el-drawer v-model="drawer" title="添加文章" direction="rtl" :before-close="handleClose">
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        status-icon
      >
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="ruleForm.title" />
        </el-form-item>
        <el-form-item label="文章分类" prop="cate_id">
          <el-select v-model="ruleForm.cate_id" placeholder="请选择" clearable>
            <el-option
              v-for="(item, index) in optionDate"
              :key="index"
              :label="item.name"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="文章封面" prop="cover_img">
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            :auto-upload="false"
            :on-change="onSelectFile"
          >
            <img v-if="ruleForm.cover_img" :src="ruleForm.cover_img" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>

          <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="文章内容" prop="content">
          <el-input v-model="ruleForm.content" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(true)"> 发布 </el-button>
          <el-button @click="submitForm()">草稿</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>
  
<script setup>
import { ref, onMounted } from 'vue'
import { getArticleCates } from '@/api/Artcate'
import { addArticle, getArticle, searchArticle } from '@/api/Article'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const formInline = ref({
  classification: '',
  status: ''
})

let tableData = ref([])
const ruleForm = ref({
  title: '',
  cate_id: '',
  cover_img: '',
  content: ''
})
const rules = ref({
  title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
  cate_id: [{ required: true, message: '请选择文章分类', trigger: 'blur' }],
  cover_img: [{ required: true, message: '请选择文章封面', trigger: 'blur' }],
  content: [{ required: true, message: '请输入文章内容', trigger: 'blur' }]
})

const optionDate = ref([])
const drawer = ref(false)
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const authorId = JSON.parse(localStorage.getItem('userInfo'))?.id

onMounted(() => {
  getArticleFun()
  getArticleCatesFun()
})

// 分类显示格式化
const articleformat = (id) => {
  if (id) {
    const res = optionDate.value.filter((item) => item.Id === id)
    return res[0]?.name
  }
}

const handleClose = () => {
  drawer.value = false
}

const release = () => {
  drawer.value = true
}

const onSelectFile = (file) => {
  ruleForm.value.cover_img = URL.createObjectURL(file.raw)
}

// 获取分类列表
const getArticleCatesFun = async () => {
  const res = await getArticleCates()
  if (res.status === 0) {
    optionDate.value = res.data
  }
}

// 获取文章
const getArticleFun = async () => {
  const res = await getArticle()
  if (res.status === 0) {
    tableData.value = res.data
  }
}

// 发布文章
const submitForm = async (flag = false) => {
  const temp = ruleForm.value
  let stateStr = '草稿'
  if (!temp.title || !temp.cate_id || !temp.cover_img || !temp.content) {
    ElMessage({
      message: '请填写好内容！',
      type: 'warning'
    })
    return
  }
  if (flag) {
    stateStr = '已发布'
  }

  const res = await addArticle({ ...temp, state: stateStr, author_id: authorId })
  if (res.status === 0) {
    ElMessage({
      message: res.data.message,
      type: 'success'
    })
  }
}

// 搜索
const onSubmit = async () => {
  const res = await searchArticle({
    cate_id: formInline.value.classification,
    state: formInline.value.status
  })
  if (res.status === 0) {
    tableData.value = res.data
  }
}

// 重置
const onReset = () => {
  formInline.value = {
    classification: '',
    status: ''
  }
  getArticleFun()
}
</script>
  
<style scoped lang="scss">
.table_header_style {
  width: 93%;
  background-color: #ffffff;
  padding: 20px 10px;
  margin: 10px auto 0 auto;
  border: 1px solid #e5e8ee;
  border-bottom: 0px transparent;
}

.table_body_style {
  width: 93%;
  padding: 20px 10px;
  border: 1px solid #e5e8ee;
  margin: 0 auto;
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
  border: 1px dashed #8c939d;
}
</style>
  